
<template>
    <meta charset="UTF-8">
    <title>个人中心</title>
        <div class="main-content">
            <div class="personal-info">
                <div class="info-item">
                    <label>头像：</label>
                    <img src="@/assets/centerpage/sculp.png" alt="touxiang">
                </div>
                <div class="info-item">
                    <label>用户名：</label>
                    <span>admin</span>
                </div>
                <div class="info-item">
                    <label>订阅：</label>
                    <span>subscribe</span>
                </div>
            </div>
            <div class="mycontent">
                <ul>
                    <li>最近</li>
                    <li>收藏</li>
                    <li>创作</li>
                    <li>下载</li>
                    <li>评论/互动</li>
                </ul>
            </div>
        </div>
        <SidebarRight/>
</template>
<script>
export default {
    name: 'CenterPage',
    data() {
        return {
        // 模拟上传
        newUploads: [
            { title: "新剪纸作品", link: "#", image: "images/new/papercut.jpg" },
            { title: "太极新教学", link: "#", image: "images/new/taichi.jpg" },
            { title: "传统音乐演奏", link: "#", image: "images/new/music.jpg" }
        ]
    }
}
}
</script>
<style scoped>

.main-content{
    display: flex;
    width: 1000px;
    height: 200vh;
    flex-direction: column;
    margin-left: 100px;
    color: azure;
 }
.personal-info{
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 300px; 
   width: 100%;
   margin-top: 50px;
   padding-left: 130px;
   box-sizing: border-box; /* 防止内容溢出 */
}
.info-item{
    width: 100%;
}
.info-item img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.mycontent{
    height: 150vh;
    width: 100%;
    background-color: rgb(101, 0, 0);
    border-radius: 20px;
}
.mycontent ul{
    display: flex;
    flex-direction: row;
    list-style-type: none;
    justify-content: space-around;
}
</style>